<layout name="home" />
<block name="content">
	<style>
		#content_wrap {
			background: #fff !important;
		}
		.chat-user {
			border-radius: 3px;
			box-sizing: border-box;
			cursor: pointer;
			height: 60px;
			line-height: 60px;
			padding-top: 5px;
			padding-right: 5px;
			padding-left: 5px;
			margin-top: 5px;
			margin-bottom: 5px;
		}
		.chat-avatar {
			border-bottom-color: rgb(51, 51, 51);
			border-bottom-left-radius: 100%;
			border-bottom-right-radius: 100%;
			border-bottom-style: none;
			border-bottom-width: 0px;
			border-image-outset: 0px;
			border-image-repeat: stretch;
			border-image-slice: 100%;
			border-image-source: none;
			border-image-width: 1;
			border-left-color: rgb(51, 51, 51);
			border-left-style: none;
			border-left-width: 0px;
			border-right-color: rgb(51, 51, 51);
			border-right-style: none;
			border-right-width: 0px;
			border-top-color: rgb(51, 51, 51);
			border-top-left-radius: 100%;
			border-top-right-radius: 100%;
			border-top-style: none;
			border-top-width: 0px;
			box-sizing: content-box;
			color: rgb(51, 51, 51);
			cursor: pointer;
			height: 50px;
			line-height: 50px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			text-align: left;
			vertical-align: top;
			white-space: nowrap;
			width: 50px;
			-webkit-user-select: none;
		}
		.chat-user-name {
			box-sizing: content-box;
			color: rgb(51, 51, 51);
			font-size: 16px;
			height: 50px;
			line-height: 50px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			overflow-x: hidden;
			overflow-y: hidden;
			padding-left: 10px;
			text-align: left;
			text-overflow: ellipsis;
			vertical-align: top;
			white-space: nowrap;
			-webkit-user-select: none;
		}
		#talk_list .active {
			background: #f3f3f3;
		}
		.chat-message {
			padding-bottom: 15px;
		}
		.message-content {
			display: block;
			background: #fff;
		}
		.new_count {
			background-color: rgb(237, 85, 101);
			background-image: none;
			background-origin: padding-box;
			background-size: auto;
			border-bottom-left-radius: 6px;
			border-bottom-right-radius: 6px;
			border-top-left-radius: 6px;
			border-top-right-radius: 6px;
			color: rgb(240, 240, 240);
			cursor: auto;
			display: block;
			font-size: 12px;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			height: 20px;
			letter-spacing: 1px;
			line-height: 20px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			padding-bottom: 0px;
			padding-top: 0px;
			position: absolute;
			right: 10px;
			text-align: center;
			top: 20px;
		}
		.message-avatar {
			border-bottom-color: rgb(51, 51, 51);
			border-bottom-left-radius: 100%;
			border-bottom-right-radius: 100%;
			border-bottom-style: none;
			border-bottom-width: 0px;
			border-image-outset: 0px;
			border-image-repeat: stretch;
			border-image-slice: 100%;
			border-image-source: none;
			border-image-width: 1;
			border-left-color: rgb(51, 51, 51);
			border-left-style: none;
			border-left-width: 0px;
			border-right-color: rgb(51, 51, 51);
			border-right-style: none;
			border-right-width: 0px;
			border-top-color: rgb(51, 51, 51);
			border-top-left-radius: 100%;
			border-top-right-radius: 100%;
			border-top-style: none;
			border-top-width: 0px;
			box-sizing: content-box;
			color: rgb(51, 51, 51);
			cursor: pointer;
			height: 50px;
			line-height: 50px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			text-align: left;
			vertical-align: top;
			white-space: nowrap;
			width: 50px;
			-webkit-user-select: none;
			border: 1px solid #ccc;
		}
		.message-user {
			position: relative;
		}
		.message-date {
			margin-left: 15px;
			position: absolute;
		}
		.message {
			background-color: rgb(95, 184, 120);
			border-bottom-left-radius: 3px;
			border-bottom-right-radius: 3px;
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			box-sizing: content-box;
			color: rgb(255, 255, 255);
			display: inline-block;
			font-size: 14px;
			font-style: normal;
			font-variant: normal;
			font-weight: normal;
			line-height: 22px;
			list-style-image: none;
			list-style-position: outside;
			list-style-type: none;
			margin-bottom: 0px;
			margin-left: 65px;
			margin-right: 0px;
			margin-top: -25px;
			max-width: none;
			padding-bottom: 8px;
			padding-left: 15px;
			padding-right: 15px;
			padding-top: 8px;
			position: relative;
			text-align: left;
			vertical-align: top;
			word-break: break-all;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
		.chat-message.send {
			text-align: right;
			width: 100%;
		}
		.chat-message.send .message-date {
			margin-right: 15px;
			position: relative;
			width: 100%;
		}
		.chat-message.send .message {
			margin-right: 65px;
			margin-top: -25px;
		}
	</style>
	<div class="row main box" style="padding-left:15px;padding-right:15px;">
		{:widget('page_header/simple',array('name'=>'客服中心'))}
		<div class="operate-panel">
			<a class="btn btn-link" onclick="todo()">等待接入</a>
			<a class="btn btn-link" onclick="index()">处理中</a>
			<a class="btn btn-link active" onclick="finish()">已完成</a>
			<div class="mid"></div>			
		</div>
		<div class="w28 m100 frame" style="max-height:700px;overflow-y: auto;background: #D9D9D9;">
			<div class="tree-menu">
				<div id="talk_list">
					<foreach name="talk_list" val="talk">
						<div class="chat-user" data="{$talk.id}">
							<img class="chat-avatar" src="{$talk.headimgurl}" alt="" >
							<span class="chat-user-name">{$talk.nickname}</span>
							<span class="new_count"></span>
						</div>
					</foreach>
				</div>
			</div>
		</div>
		<div style="width:16px;"></div>
		<div class="x1 frame m100" style="height:700px;">
			<div class="content-wrap" style="height:540px;background:#E2E2E2;margin-bottom: 10px;overflow-y: scroll" id="content_wrap">
			
			</div>
			<textarea id='msg_box' class="textarea" style="height:120px;line-height:24px;padding-top:5px;" placeholder="输入消息内容，按Ctrl+回车键发送"></textarea>
		</div>
		<div style="width:16px;"></div>
		<div class="w28 m100 frame" style="max-height:700px;overflow-y: auto;">
			<div></div>
		</div>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		layui.use(['global', 'uploader', 'editor'], function() {
			var fn = {
				index : function() {
					window.open('{:url("index")}', '_self');
				},
				todo : function() {
					window.open('{:url("todo")}', '_self');
				},
				finish : function() {
					window.open('{:url("finish")}', '_self');
				}
			};
			win_exp(fn);

			$('#msg_box').on('keydown', function() {
				if (event.ctrlKey && event.keyCode == 13) {
					$id = $('#talk_list .chat-user.active').attr('data');
					if ($id == undefined) {
						layer.msg('请选择人员');
						return false;
					}
					var vars = {
						'id' : $id,
						'content' : this.value
					};
					send_ajax('{:url("send_text")}', vars, function(ret) {
						if (ret.errcode == 0) {
							$this = $('#talk_list .active');
							$id = $this.attr('data');
							vars = "id=" + $id;
							send_ajax('{:url("get_talk_content")}', vars, function(ret) {
								html = '';
								for (s in ret) {
									if (ret[s].action_type == 'receive') {
										html += parse_msg_receive(ret[s].nickname, ret[s].create_time, ret[s].headimgurl, ret[s].content);
									} else {
										html += parse_msg_send(ret[s].user_name, ret[s].create_time, './uploads/avatar/' + ret[s].emp_no + '.png', ret[s].content);
									}
								}
								$("#content_wrap").html(html);
								$('#msg_box').val('');
								setTimeout(function() {
									$('#content_wrap').scrollTop(100000);
								}, 200);
							});
						} else {
							layer.msg(ret.errmsg);
						};
					});
				}
			});

			$('#talk_list .chat-user').on('click', function() {
				$('#talk_list .chat-user.active').removeClass('active');
				$this = $(this);
				$this.addClass('active');
				$id = $this.attr('data');
				var vars = {};
				vars.id = $id;
				vars.is_read = true;
				send_ajax('{:url("get_talk_content")}', vars, function(ret) {
					html = '';
					for (s in ret) {
						if (ret[s].action_type == 'receive') {
							html += parse_msg_receive(ret[s].nickname, ret[s].create_time, ret[s].headimgurl, ret[s].content);
						} else {
							html += parse_msg_send(ret[s].user_name, ret[s].create_time, './uploads/avatar/' + ret[s].emp_no + '.png', ret[s].content);
						}
					}
					$("#content_wrap").html(html);
					setTimeout(function() {
						$('#content_wrap').scrollTop(100000);
					}, 200);
				});
			});

			//解析消息发送样式
			function parse_msg_receive(user, time, avar, message) {
				var _html = '<div class="chat-message">';
				_html += '<div class="message-user">';
				_html += '<img class="message-avatar" src="' + avar + '" alt="">';
				_html += '<span class="message-date"> ' + user + '&nbsp;&nbsp;&nbsp;' + int_to_date(time, 'MM-dd hh:mm:ss') + '</span>';
				_html += '</div>';
				_html += '<div class="message">' + message + '</div></div>';

				return _html;
			}

			function parse_msg_send(user, time, avar, message) {
				var _html = '<div class="chat-message send">';
				_html += '<div class="message-user">';
				_html += '<span class="message-date"> ' + int_to_date(time, 'MM-dd hh:mm:ss') + ' ' + user + '</span>';
				_html += '<img class="message-avatar" src="' + avar + '" alt="">';
				_html += '</div>';
				_html += '<div class="message">' + message + '</div></div>';

				return _html;
			}

			var ws = {
				count : 0,
				retry : 10,
				server : '127.0.0.1',
				port : 1001,
				inited : 0,
				socket : null,
				bind_url : '{:url("bind")}',
				connect : function() {
					ws.socket = new WebSocket('ws://' + ws.server + ':' + ws.port);
					ws.socket.onopen = function() {
						console.log('1-> 握手');
						console.log('2-> 发送初始化');
						var request = {};
						request.type = 'init';
						ws.send(request);
					};
					ws.socket.onmessage = function(ret) {
						var msg = JSON.parse(ret.data);
						console.log(msg);
						switch(msg.type) {
						case 'init':
							ws.init(msg);
							return;

						case 'online':
							ws.online(msg);
							return;

						case 'new_todo':
							console.log(msg);
							return;

						case 'new_msg':
							send_ajax('{:url("get_new_msg_count")}', {}, function(ret) {
								console.log(ret);
								for (s in ret) {
									$("#talk_list .chat-user[data='" + s + "'] .count").text(ret[s]);
								}
							});
							$active_talk_id = $("#talk_list .active").attr('data');
							if ($active_talk_id == msg.talk_id) {
								var vars = {};
								vars.id = msg.talk_id;
								send_ajax('{:url("get_talk_content")}', vars, function(ret) {
									html = '';
									for (s in ret) {
										if (ret[s].action_type == 'receive') {
											html += parse_msg(ret[s].nickname, ret[s].create_time, ret[s].headimgurl, ret[s].content);
										} else {
											html += parse_msg(ret[s].user_name, ret[s].create_time, './uploads/avatar/' + ret[s].emp_no + '.png', ret[s].content);
										}
									}
									$("#content_wrap").html(html);
									$('#msg_box').val('');
									setTimeout(function() {
										$('#content_wrap').scrollTop(100000);
									}, 200);
								});
							}

							return;

						case 'notify':
							return;

						case 'message':
							console.log(msg);
							return;
						}
					};
					ws.socket.onclose = function() {
						ws.count++;
						if (ws.retry > ws.count) {
							ws.connect();
						}
					};
					ws.socket.onerror = function() {
						ws.count++;
						if (ws.retry > ws.count) {
							ws.connect();
						};
					};
				},
				send : function(data) {
					console.log(data);
					if (this.socket && this.socket.readyState == 1) {
						this.socket.send(JSON.stringify(data));
					}
				},
				send_heat_beat : function() {
					var request = {};
					request.type = 'ping';
					if (this.socket && this.socket.readyState == 1) {
						this.socket.send(JSON.stringify(request));
					}
				},
				init : function(ret) {
					console.log('3-> 接受client_id');
					console.log(ret);
					$.post(ws.bind_url, ret, function(ret) {
						console.log(ret);
					});

					setInterval(function() {
						ws.send_heat_beat();
					}, 12000);
				},
				online : function(ret) {
					console.log(ret);
				}
			};

			ws.server = "127.0.0.1";
			ws.port = 8282;
			ws.connect();

		});
	</script>
</block>